<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#app{
				width: 200px;
				height: 200px;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			helloworld
		</div>
		<script type="text/javascript">
			document. querySelector('#app').style.color = 'yellow'; 
			console.log("1:主线程的宏任务")
			// Promise.resolve()生成promise对象。此对象的then的回调函数会立即放入到微事件队列里
			Promise.resolve().then(() => {
				console.log("promise resolve red")
				document. querySelector('#app').style.color = 'red'; 
			}); 
			
			// setTimeout的回调函数的任务是异步的宏任务
			setTimeout(() => {
			  console.log('setTimeout 宏任务')
			  document.querySelector('#app').style.color = 'blue'; 
			  Promise.resolve(). then(() => {
				  let sum = 0
				for (let i = 0; i < 99999; i++) {
					sum += i;
				  //console.log(i);
				}
				console.log("promise resolve sum",sum)
			  }); 
			}, 0); 
			Promise.resolve().then(() => {
				console.log("promise resolve purple")
				document. querySelector('#app').style.color = 'purple'; 
				Promise.resolve().then(()=>{
					console.log("这是主线程里微任务的微任务")
				})
				
				setTimeout(()=>{
					console.log("微任务里的宏任务")
				},0)
			}); 
		</script>
	</body>
</html>
